<template>
  <div>
    <el-form :model="passForm" ref="passFormRef" status-icon :rules="rules">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input
          v-model="passForm.oldPassword"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="passForm.newPassword"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>

    <el-dialog
      v-model="show2faDialog"
      title="绑定 2FA"
      width="30%"
      align-center
      center
    >
      <div class="dialog-content">
        <span>扫描完毕请手动关闭窗口</span>
        <el-image :src="twofaURL"></el-image>
      </div>
    </el-dialog>

    <el-dialog
      v-model="showMailDialog"
      title="绑定 邮箱"
      width="30%"
      align-center
      center
    >
      <div class="dialog-content">
        <el-input placeholder="输入邮箱地址" v-model="mailForm.mail"></el-input>
        <div class="captchaInput mt-10">
          <el-input
            placeholder="输入邮箱验证码"
            v-model="mailForm.code"
          ></el-input>
          <el-button type="primary" @click="sendMailCode">获取验证码</el-button>
        </div>
        <el-button type="primary" class="mt-10" @click="handleBind"
          >绑定邮箱</el-button
        >
      </div>
    </el-dialog>

    <el-button type="primary" @click="changePass(passFormRef)"
      >修改密码</el-button
    >
    <el-button type="primary" @click="bind2fa">绑定 2FA</el-button>
    <el-button type="primary" @click="showMailDialog = true"
      >绑定 邮箱</el-button
    >
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive } from "vue";
import {
  updatePassword,
  req2faCode,
  bindMail,
  confirmBind,
} from "../api/userAPI";

const passForm = reactive({
  oldPassword: "",
  newPassword: "",
});
const mailForm = reactive({
  mail: "",
  code: "",
});
const twofaURL = ref("");
const passFormRef = ref();
const show2faDialog = ref(false);
const showMailDialog = ref(false);
const rules = {
  oldPass: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPass: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入新密码"));
        } else if (value === passForm.oldPassword) {
          callback(new Error("新密码不能和旧密码相同"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const changePass = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      updatePassword(passForm).then((data) => {
        if (data.success) {
          ElMessage.success(data.message);
        } else {
          ElMessage.error(data.message);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
const bind2fa = () => {
  req2faCode().then((data) => {
    twofaURL.value = data.data;
    show2faDialog.value = true;
  });
};

const sendMailCode = () => {
  bindMail(mailForm.mail).then((data) => {
    ElMessage.success(data.message);
  });
};
const handleBind = () => {
  confirmBind(mailForm.code).then((data) => {
    ElMessage.success(data.message);
    showMailDialog.value = false;
    mailForm.mail = "";
    mailForm.code = "";
  });
};
</script>

<style scoped>
.captchaInput {
  display: flex;
  width: 100%;
}
</style>
